<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<script src="__PUBLIC__/js/echarts/dist/echarts.js"></script>
<script src="__PUBLIC__/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.9.1.min.js"></script>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
<div> 日期选择：

    <input class="Wdate time" type="text" value="2015-05"  id="month" onfocus="WdatePicker({dateFmt:'yyyy-MM'})" datatype="*"/>
    <button type="button" class="btn btn-green" onclick="onS();">统计</button>
</div>
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;">

</div>
<!--  <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div> -->

<!--Step:2 Import echarts.js-->
<!--Step:2 引入echarts.js-->

<script type="text/javascript">
    object={}
    var m = "2015-05";
    $.post("{{:U('/Index/submitFrom')}}",{'month':m},
            function(data){
                object=data;
                showLineDemo();
            });
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    function onS(){
        var month = $('#month').val();
        $.post("{{:U('/Index/submitFrom')}}",{'month':month},
                function(data){
//                    alert(data['wbar_name']);
                    object=data;
                    showLineDemo();
                });
    };
    function showLineDemo(){
        require.config({
            paths: {
                echarts: '__PUBLIC__/js/echarts/dist'
            }
        });

        // Step:4 require echarts and use it in the callback.
        // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
        require(
                [
                    'echarts',
                    'echarts/chart/bar',
                    'echarts/chart/line',
                    'echarts/chart/map'
                ],
                function (ec) {
                    //--- 折柱 ---
                    var myChart = ec.init(document.getElementById('main'));
                    myChart.setOption({
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:object['title']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : object['wbar_name']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                splitArea : {show : true}
                            }
                        ],
                        series : [
                            {
                                name:'外卖订单',
                                type:'bar',
                                data:object['number']
                            },
                            {
                                name:'网吧超市订单',
                                type:'bar',
                                data:object['wbar_number']
                            }
                        ]
                    });
                }
        );
    }
</script>
</body>
</html>